<template>
      <div>
          <el-row  v-for="curRow in totalRow" :gutter="20" :justify="'space-evenly'" align="middle">
              <el-col v-for="index in cols" :span="1">
                <el-button @click="selectMenu(icons[curRow*cols+index])" v-if="curRow*cols+index<icons.length">
                  {{icons[curRow*cols+index]}}
                  <el-icon>
                    <component :is="icons[curRow*cols+index]"></component>
                  </el-icon>
                </el-button>
              </el-col>
          </el-row>
      </div>
</template>

<script setup>
import {iconNames} from "@/util/icon.js";
import GuiguIcon from "@/components/GuiguIcon/index.vue";
import {ref} from "vue";
const icons=iconNames()
const cols=12
const totalRow=Math.ceil(icons.length/cols)
const curIndex=ref()
const selectMenu=(name)=>{
  console.log(name)
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>